<template>
    <view class="filter-wrapper" :style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }" @touchmove.stop.prevent="discard">
        <view class="inner-wrapper">
            <view class="mask" :style="{top: masktop}" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
            <view class="navs">
                <view class="c-flex-align" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }" v-for="(item, index) in navData" :key="index" @click="navClick(index)">
                   <template v-if="selIndex[index] !== -1">
						<view  class="actNav onerow" style="min-width: 50px;text-align: center;" v-if="item[selIndex[index]].select"><text>{{ item[selIndex[index]].text }}</text></view>
						<!-- <uni-icons style="margin-left: 2px;"  color="#FF8900"  :type="index === actNav ? 'top' : 'bottom'" size="16"></uni-icons> -->
						<uni-icons color="#ccc" v-if="!item[selIndex[index]].select" style="margin-left: 2px;" type="bottom" size="16"></uni-icons>
						<uni-icons color="#ccc" v-else style="margin-left: 2px;" type="closeempty" size="16"  @click.native.stop="cancelList(index)"></uni-icons>
				   </template>
				   <template v-else>
					   <view class="onerow" style="min-width: 50px;text-align: center;" ><text>{{ types[index] }}</text></view>
					   <uni-icons style="margin-left: 2px;"  :color="index === actNav ? '#FF8900' : '#ccc'"  :type="index === actNav ? 'top' : 'bottom'"  size="16"></uni-icons>
				   </template>
				   
                </view>

                <view class="date-wrapper">
					 <uni-datetime-picker
					                v-model="daterange"
									@change="handleDate"
					                type="daterange">
									<view class="date c-flex-align" :style="{ height: height + 'rpx' }" @click="dateClick">
									    <view :class="[selDate ? 'selectedDate' : 'noneDate']"><text>{{ selDate || '选择日期' }}</text></view>
										<uni-icons color="#ccc" v-if="!selDate" style="margin-left: 2px;" type="bottom" size="16"></uni-icons>
										<uni-icons color="#ccc" v-else style="margin-left: 2px;" type="closeempty" size="16"  @click.native.stop="cancel"></uni-icons>
									</view>
					</uni-datetime-picker>
                   <!-- <picker mode="date" @change="handleDate">
                        <view class="date c-flex-align" :style="{ height: height + 'rpx' }" @click="dateClick">
                            <view style="min-width: 50px;">{{ selDate || '选择日期' }}</view>
							<uni-icons color="#ccc" v-if="!selDate" style="margin-left: 2px;" type="bottom" size="16"></uni-icons>
							<uni-icons color="#ccc" v-else style="margin-left: 2px;" type="closeempty" size="16"  @click.native.stop="cancel"></uni-icons>
                        </view>
                    </picker> -->
                </view>
            </view>
            <scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
				<template v-if="navData[actNav] && navData[actNav].length > 0">
					<view class="item-opt c-flex-align2" :class="item.select ? 'actOpt' : ''" v-for="(item, index) in navData[actNav]" :key="index" @click="handleOpt(index)">
					   <text> {{ item.text }}</text>
					</view>
				</template>
				<view class="item-opt c-flex-align2 empty" v-else>没有数据</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// import { getCurDateTime } from '@/libs/utils.js';
export default {
    props: {
        height: {
            type: Number,
            default: 108
        },
        top: {
            type: String,
            default: 'calc(var(--window-statsu-bar) + 44px)'
        }, 
		masktop: {
            type: String,
            default: '70px'
        },
        border: {
            type: Boolean,
            default: false
        },
		types: {
			type: Array,
			default: () => {
				return []
			}
		},
        filterData: {
            //必填
            type: Array,
            default: () => {
                return [];
            }
            // default: () => {
            //     return [
            //         [{ text: '全部状态', value: '' }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }],
            //         [{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }]
            //     ];
            // }
        },
        defaultIndex: {
            //默认选中条件索引,超出一类时必填
            type: Array,
            default: () => {
                return [0];
            }
        }
    },
    data() {
        return {
            navData: [],
            popupShow: false,
            showMask: false,
            actNav: null,
            selDate: '',
			daterange: [],
            selIndex: [-1, -1] //选中条件索引
        };
    },
	watch: {
		filterData: {
			handler () {
				this.navData = this.filterData
			},
			immediate: true
		}
	},
    created() {
        this.navData = this.filterData;
    },
    methods: {
		cancel (a) {
			console.log(a)
			this.selDate = ''
			this.daterange = []
			this.$emit('dateChange', '');
		},
		cancelList (index) {
			this.actNav = index;
			this.handleOpt(this.selIndex[this.actNav])
		},
        keepStatus() {
            this.navData.forEach(itemnavData => {
                itemnavData.map(child => {
                    child.select = false;
                });
                return itemnavData;
            });
			console.log('this.selIndex', this.selIndex)
            for (let i = 0; i < this.selIndex.length; i++) {
                let selindex = this.selIndex[i];
				if (selindex !== -1) {
					this.navData[i][selindex].select = true;
				}
            }
        },
        navClick(index) {
            if (index === this.actNav) {
                this.tapMask();
                return;
            }
            this.popupShow = true;
            this.showMask = true;
            this.actNav = index;
        },
        handleOpt(index) {
			console.log(index)
			if (this.selIndex[this.actNav] !== index) {
				this.selIndex[this.actNav] = index;
			} else {
				this.selIndex[this.actNav] = -1;
			}
            this.keepStatus();
            setTimeout(() => {
                this.tapMask();
            }, 100);
            let data = [];
            let res = this.navData.forEach(item => {
                let sel = item.filter(child => child.select === true);
                data.push(sel);
            });
            console.log(data);
            this.$emit('onSelected', data);
        },
        dateClick() {
            this.tapMask();
        },
        tapMask() {
            this.showMask = false;
            this.popupShow = false;
            this.actNav = null;
        },
        handleDate(e) {
			console.log('handleDate', e)
            // let d = e.detail.value;
            this.selDate = e.join('\r\n');
            this.$emit('dateChange', e);
        },
        discard() {}
    }
};
</script>

<style lang="scss" scoped>

.c-flex-align {
    display: flex;
    align-items: flex-start;
}
.c-flex-align2 {
    display: flex;
    align-items: center;
}
.c-flex-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.filter-wrapper {
    position: fixed;
    left: 0;
    width: 750rpx;
    z-index: 999;
	font-size: 12px;
    .inner-wrapper {
        // position: relative;
        .navs {
            position: relative;
            height: 70rpx;
            padding: 0 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            border-bottom: 2rpx solid #f5f6f9;
            color: #999;
            z-index: 999;
            box-sizing: border-box;
            & > view {
                flex: 1;
                height: 100%;
                flex-direction: row;
                z-index: 999;
            }
            .date {
                justify-content: flex-end;
            }
            .actNav {
                color: #FF8900;
				font-size: 12px;
                font-weight: bold;
            }
        }
        .mask {
            z-index: 666;
            position: fixed;
            top: calc(var(--status-bar-height) + 80px);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.15s linear;
            &.show {
                background-color: rgba(0, 0, 0, 0.4);
            }
            &.hide {
                display: none;
            }
        }
        .popup {
            position: relative;
            max-height: 700rpx;
            background-color: #fff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            overflow: scroll;
            z-index: 999;
            transition: all 1s linear;
            opacity: 0;
            display: none;
            .item-opt {
                height: 100rpx;
                padding: 0 40rpx;
                color: #999;
                border-bottom: 2rpx solid #f5f6f9;
            }
            .actOpt {
                color: #FF8900;
                font-weight: bold;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
					background-size: 100% 100%;
					background-image: url("/static/main/Path.png");
                    right: 40rpx;
					width: 18px;
					height: 13px;
                }
				// &::after {
				//     content: '✓';
				//     font-weight: bold;
				//     font-size: 36rpx;
				//     position: absolute;
				//     right: 40rpx;
				// }
            }
        }
        .popupShow {
            display: block;
            opacity: 1;
        }
    }

    .icon-triangle {
        width: 16rpx;
        height: 16rpx;
        margin-left: 10rpx;
    }
	.empty {
		 height: 150rpx!important;
	}
	.onerow {
		overflow: hidden;
		// display: inline-block;
		display: contents;
	    white-space: nowrap; 
	    width: 100%; 
	    text-overflow:ellipsis;
	}
	.selectedDate {
		text-align: right;
		min-width: 50px;
		line-height: 15px;
		margin-top: -5px;
	}
	.noneDate {
		min-width: 50px;
		text-align: center;
	}
}
</style>
